<%--
  Created by IntelliJ IDEA.
  User: 28633
  Date: 2021/1/19
  Time: 15:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--导入配置页面--%>
<%@ include file="basePath.jsp"%>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>个人注册</title>


    <link rel="stylesheet" type="text/css" href="${basePath}/static/reception/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="${basePath}/static/reception/css/pages-register.css" />
</head>

<body>
<div class="register py-container ">
    <!--head-->
    <div class="logoArea">
        <a href="" class="logo"></a>
    </div>
    <!--register-->
    <div class="registerArea">
        <h3>注册新用户<span class="go">我有账号，去<a href="lt_toLogin" target="_blank">登陆</a></span></h3>
        <div class="info">
            <form class="sui-form form-horizontal" action="${basePath}lt_auth/lt_reg" method="post" onsubmit="return checkLogin(this)">
                <div class="control-group">
                    <label class="control-label">用户名：</label>
                    <div class="controls">
                        <input type="text" name="username" id="username" placeholder="请输入你的用户名" class="input-xfat input-xlarge" onblur="checkUsername();"/>
                    </div>
                    <span id="dui" style="display:none; color: red;" >
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            用户名不符合要求
                    </span>
                    <span id="dui1" style="display:none; color: red;" >
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            用户名已存在
                    </span>
                </div>
                <div class="control-group">
                    <label for="inputPassword" class="control-label">登录密码：</label>
                    <div class="controls">
                        <input type="password" name="password" id="password" placeholder="设置登录密码" class="input-xfat input-xlarge" onblur="checkPassword()"/>
                    </div>
                    <span id="cuo" style="display:none; color: red">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    密码不符合要求
                    </span>
                </div>
                <div class="control-group">
                    <label for="inputPassword" class="control-label">确认密码：</label>
                    <div class="controls">
                        <input type="password" name="ConfirmPassword" id = "ConfirmPassword" placeholder="再次确认密码" class="input-xfat input-xlarge" onblur="checkPwd()"/>
                    </div>
                    <span  id="cuo1" style="display:none; color: red;">
            &nbsp;        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    密码不一致，请重新输入
                    </span>
                </div>

                <div class="control-group">
                    <label class="control-label">手机号：</label>
                    <div class="controls">
                        <input type="text" id="phone" name="phone" placeholder="请输入你的手机号" class="input-xfat input-xlarge"onblur="checkPhone()"/>
                        <input type="button" onclick="time(this)" value="获取验证码" style="background-color: #1F73C9;" id="sendPhoneCode" />
                    </div>
                </div>
                <div class="psw">
                <span id="errPhone" style="display:none; color: red" >
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                手机号码有误，请重填</span>
                </div>


        <div class="control-grou">
            <label for="inputPassword" class="control-label">短信验证码：</label>
            <div class="controls">
                <input type="text" name="yzm" id="yzm" placeholder="短信验证码" class="input-xfat input-xlarge" onblur="checkYzm()" >
            </div>
            <span id="codeMsg" style="color: red; display: none;">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            验证码有误，请重填
        </span>
        </div>


                <div class="control-group">
                    <label for="inputPassword" class="control-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <div class="controls">
                        <input name="m1" type="checkbox" value="2" checked="">
                        <span>同意协议并注册《品优购用户协议》</span>
                    </div>
                </div>

                <div class="control-group">
                    <label class="control-label"></label>
                    <div class="controls btn-reg">
                        <button type="submit" class="psw-btn"><a class="sui-btn btn-block btn-xlarge btn-danger"  target="_blank">完成注册</a></button>
                    </div>
                </div>
            </form>
            <div class="clearfix"></div>
        </div>
    </div>
    <!--foot-->
    <div class="py-container copyright">
        <ul>
            <li>关于我们</li>
            <li>联系我们</li>
            <li>联系客服</li>
            <li>商家入驻</li>
            <li>营销中心</li>
            <li>手机品优购</li>
            <li>销售联盟</li>
            <li>品优购社区</li>
        </ul>
        <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
        <div class="beian">京ICP备08001421号京公网安备110108007702
        </div>
    </div>
</div>


<script type="text/javascript" src="${basePath}/static/reception/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="${basePath}/static/reception/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="${basePath}/static/reception/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="${basePath}/static/reception/js/plugins/jquery-placeholder/jquery.placeholder.min.js"></script>
<script type="text/javascript" src="${basePath}/static/reception/js/pages/register.js"></script>

<script type="text/javascript">
    var regUsername = /^\w{5,15}$/;
    var regPhone = /^1[3456789]\d{9}$/;
    var regPassword = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/
    // 倒计时参数
    var wait=60;
    // 接收验证码
    var sendCode = '';


    function checkLogin(frm) {
        let username = frm.username.value;
        let password = frm.password.value;
        let regPassword = frm.ConfirmPassword.value;
        let phone = frm.phone.value;
        let yzm = frm.yzm.value;
        let hobby = frm.m1;
        if (!regUsername.test(username) || !username) {
            alert("用户名不符合要求");
            return false;
        }
        if (!regPassword.test(password) || !password) {
            alert("密码不符合要求");
            return false;
        }
        if (regPassword != password || !regPassword) {
            alert("两次密码不一致");
            return false;
        }
        if (!regPhone.test(phone) || !phone) {
            alert("手机号不符合要求");
            return false;
        }
        if (!yzm || sendCode != yzm) {
            alert("验证码不符合要求");
            return false;
        }
        if (!hobby.checked) {
            alert("请勾选协议");
            return false;
        }
        return true;
    }
    // 发送验证码
    function time(o) {
        let phoneValue = document.getElementById("phone").value;

        if (!phoneValue) {
            // 电话号码为空，直接跳出
            let errPhone = document.getElementById("errPhone");
            errPhone.style.display = 'block';
            return;
        }
        if (wait == 0) {
            o.removeAttribute("disabled");
            o.value="获取验证码";
            wait = 60;
        } else {
            if (wait == 59) {
                // 倒计时到了59，发送验证码
                // 通过ajax发送给验证码
                $.post("${basePath}lt_auth/sendCode", function (data) {
                    // 如果传过来的数据不为空
                    if (data != null) {
                        sendCode = data;
                        console.log(sendCode);
                    } else {
                        sendCode = 0;
                    }
                },'json');
            }

            // 设置按钮是否可点击
            o.setAttribute("disabled", true);
            o.value="重新发送(" + wait + ")";
            wait--;
            setTimeout(function() {
                    time(o)
                },
                1000)
        }
    }

    /**
     * 判断验证码
     */
    function checkYzm() {
        let yzm  = document.getElementById("yzm").value;
        let codeMsg = document.getElementById("codeMsg");
        if (!yzm || yzm != sendCode) {
            console.log(sendCode);
            codeMsg.style.display = "block";
        } else {
            codeMsg.style.display = "none";
        }
    }

    /**
     * 核对密码
     */
    function checkPassword() {
        let password = document.getElementById("password").value;
        let cuo = document.getElementById("cuo");
        if (!regPassword.test(password)) {
            cuo.style.display = "block";
        } else {
            cuo.style.display = "none";
        }
    }

    /**
     * 确定密码
     */
    function checkPwd() {
        let regPassword = document.getElementById("ConfirmPassword").value;
        let password = document.getElementById("password").value;
        let cuo1 = document.getElementById("cuo1");
        if (password!=regPassword) {
            cuo1.style.display = "block";
        } else {
            cuo1.style.display = "none";
        }
    }

    /**
     * 核对手机号码是否正确
     */
    function checkPhone(){
        let phone = document.getElementById('phone').value;
        let errPhone = document.getElementById("errPhone");
        if(!regPhone.test(phone)){
            errPhone.style.display = "block";
        } else {
            errPhone.style.display = "none";
        }
    }

    /**
     * 核对用户名是否存在
     */
    function checkUsername() {
        let username = document.getElementById("username").value;
        let dui = document.getElementById("dui");
        let dui1 = document.getElementById("dui1");
        if (!regUsername.test(username)){
            dui.style.display = "block";
        } else {
            dui.style.display = "none";
        }
        //当前用户名符合要求之后，判断用户名是否已注册
        $.post("${basePath}lt_auth/checkUsername", function (data) {
            if (data == -1) {
                dui1.style.display = "block";
            } else {
                dui1.style.display = "none";
            }
        })
    }
</script>
</body>

</html>
